<template>
  <div class="maintainDetail zy-content">
    <back-level :goPage="back" />
    <Card title="点检计划" class="detail-content-layout">
      <div class="titleItem">
        <div class="checkObject">
          <div class="checkObjectItem">
            <div class="checkObjectName">点检计划</div>
            <div class="checkObjectValue">
              <Tooltip max-width="200">
                <div class="over-wrapper">{{ effPlanDetail.planName }}</div>
                <div slot="content">
                  <p>{{ effPlanDetail.planName }}</p>
                </div>
              </Tooltip>
            </div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName">点检等级</div>
            <div class="checkObjectValue">{{ effPlanDetail.planLevel }}</div>
          </div>

          <div class="checkObjectItem">
            <div class="checkObjectName">触发条件</div>
            <div class="checkObjectValue">{{ effPlanDetail.planCycle }}/{{ effPlanDetail.cycleUnit }}</div>
          </div>

        </div>
      </div>
    </Card>
    <Card title="点检对象" class="detail-content-layout mt16">
      <div class="contentTable">
        <Table @on-column-width-resize="(a, b, c, d) => { onColumnWidthResize(a, b, c, d, 'MaintenanceObjectDetail') }"
          class="resizable-table" border ref="selection" :columns="columns" :data="effPlanDetail.mmoldSpotCheckPlanRefs">
        </Table>
      </div>
    </Card>
    <Card title="点检内容" class="detail-content-layout mt16">
      <div class="contentTable">
        <Table @on-column-width-resize="(a, b, c, d) => { onColumnWidthResize(a, b, c, d, 'MaintenanceContentDetail') }"
          class="resizable-table" border ref="selection" :columns="contentColumns"
          :data="effPlanDetail.mmoldSpotCheckPlanSpotCheckRefs">
          <template slot-scope="{ row }" slot="action">
            <span class="operationBtn" @click="checkToolInfo(row)">
              <Icon type="md-eye" size='18' />查看工具和物料
            </span>
          </template>
        </Table>
      </div>
    </Card>
    <Card title="点检时间" class="detail-content-layout mt16">
      <div class="titleItem">
        <div class="checkObject">
          <div class="checkObjectItem">
            <div class="checkObjectName">{{ $t('maintenance.createTime') }}</div>
            <div class="checkObjectValue">{{ effPlanDetail.firstTime }}</div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName">{{ $t('maintenance.planEndTime') }}</div>
            <div class="checkObjectValue">{{ effPlanDetail.endTime }}</div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName">{{ $t('maintenance.Taskduration') }}</div>
            <div class="checkObjectValue">{{ `${effPlanDetail.liveTimeD}天${effPlanDetail.liveTimeH}小时` }}</div>
          </div>
        </div>
      </div>
    </Card>
    <Modal :mask-closable="false" v-model="visible" :title="`${$t('common.Detail')}`" class="checkContentModal" width='1200' footer-hide>
      <contentDetail :formInlineShow="formInlineShow" :materData="materData" :planToolList="toolList"></contentDetail>
    </Modal>
  </div>
</template>

<script>
import contentDetail from './contentDetail.vue'
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
  name: "maintainDetail",
  mixins: [toggleTableOperation],
  components: {
    contentDetail
  },
  props: ['effPlanDetail'],
  data() {
    return {
      formInlineShow: true,
      deviceTypeList: [],
      formInline: {},
      text: '',
      visible: false,
      materData: [],
      toolList: [],
      columns: [
        // {
        //   type: 'index',
        //   width: 60,
        //   title: `${ this.$t('common.index') }`,
        //   align: 'center'
        // },
        {
          title: '模具名称',
          key: "moldName",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          width: 300,
          resizable: true
        },
        {
          title: '模具编号',
          key: "moldCode",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          width: 300,
          resizable: true
        },
        // {  title: `${ this.$t('common.machineno') }`, key: "deviceNo",align: 'center', minWidth: 100, tooltip: true  },
        {
          title: '模具型号',
          key: "moldModel",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          // width:300,
          // resizable: true
        },
        {
          title: '功能位置',
          key: "functionLocation",
          align: 'center',
          minWidth: 200,
          tooltip: true,
          width: 300,
          resizable: true
        },
        // { title: `${ this.$t('common.Productioncode') }`, key: "productionCode",align: 'center', minWidth: 100, tooltip: true  },
        // { title: `${ this.$t('common.ProductionDescription') }`, key: "productionLine",align: 'center', minWidth: 100, tooltip: true  },
      ],
      levelList: [
        { name: "一级点检", key: 1 },
        { name: "二级点检", key: 2 },
        { name: "三级点检", key: 3 },
      ],
      contentColumns: [
        {
          title: '点检项目',
          key: "checkName",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true,
        },
        {
          title: '点检级别',
          key: "checkLevel",
          minWidth: 180,
          align: "center",
          resizable: true,
          tooltip: true,
        },
        {
          title: '触发条件',
          key: "checkCycle",
          align: 'center',
          minWidth: 100,
          resizable: true, tooltip: true,
        },
        // {
        //   title: '标准工时（S）',
        //   key: "unitName",
        //   align: 'center',
        //   minWidth: 160,
        //   resizable: true, tooltip: true,
        // },
        // {
        //   title: '需求人数',
        //   key: "personQty",
        //   minWidth: 130,
        //   align: "center",
        //   resizable: true, tooltip: true,
        // },
      ],
      total: 64,
      pageSize: 10,
      pageNum: 1,
      pageSizeOption: [10, 20, 30, 40],
    }
  },
  created() {

    this.getColumnWidth(this.contentColumns, 'MaintenanceContentDetail')
    this.getColumnWidth(this.columns, 'MaintenanceObjectDetail')
    // this.getFaultCategory("设备类型")
  },
  methods: {
    checkToolInfo(row) {
      this.visible = true
      this.getWlDetail(row.itemId || row.id)
    },
    getWlDetail(itemId) {
      this.axios({
        method: 'get',
        url: '/dms/dcmMaintainItem/queryById',
        params: {
          id: itemId
        }
      }).then(res => {
        if (res.code === 200) {
          this.formInline = {
            ...res.data,
            triggerCycle: res.data.triggerCycle ? res.data.triggerCycle.split(',') : [],
            minValue: res.data.minValue ? Number(res.data.minValue) : '',
            maxValue: res.data.maxValue ? Number(res.data.maxValue) : ''
          }
          if (this.formInline.itemLevel) {
            this.formInline.itemLevel = this.levelList.find(val => val.key === this.formInline.itemLevel).name
          }
          // if (this.formInline.categoryName){
          //   this.categorySelectChange(this.formInline.categoryName)
          // }
          this.toolList = res.data.dcmMaintainToolList.map(item => {
            return {
              ...item,
              isEdit: false,
            }
          })
          this.materData = res.data.dcmMaintainMaterialList.map(item => {
            return {
              ...item,
              isEdit: false,
            }
          })

          // this.materialList = res.data.materialList
          // this.toolList = res.data.toolList
        } else {
          this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
        }
      })
    },
    deviceNameChange(val) {
      if (val) {
        this.searchParams.deviceType = val
      }
    },
    //获取故障数据
    getFaultCategory(name) {
      this.axios({
        method: 'get',
        url: '/dms/faultCategory/basicDict',
        params: { name }
      }).then(res => {
        if (res.code === 200) {

          if (name === '故障分类') {
            this.faultCategoryList = res.data.map(item => {
              if (item.value) return item;
            })
          } else if (name === '设备类型') {
            this.deviceTypeList = res.data.map(item => {
              if (item.value) return item;
            })
          }
        } else {
          this.$Message.warning(({ content: res.msg, duration: 6, closable: true }))
        }
      })
    },
    back() {
      this.$emit('changeDetailVisible', false, this.effPlanDetail.id)
    },
    changePageNum() {
    },
    changePageSize() {
    }
  }
}
</script>
<style lang="scss">
.maintainDetail {
  background: #fff;

  .title {
    display: flex;
    justify-content: flex-start;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    align-items: center;

    .back {
      color: #187BDB;
      font-size: 16px;
      padding-left: 20px;
      cursor: pointer;
      float: right;
    }
  }

  .titleItem {
    position: relative;
    font-size: 18px;
    //font-weight: bold;
    padding: 0;

    .checkObject {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      font-family: 'Arial Normal', 'Arial', sans-serif;
      font-weight: 400;
      font-style: normal;
      letter-spacing: normal;

      /*border-bottom: 2px solid #D7D7D7;*/
      .checkObjectItem {
        display: flex;
        flex: 33.33%;
        flex-wrap: wrap;

        .checkObjectName {
          height: 40px;
          line-height: 40px;
          width: 100%;
          border: 1px solid #EEEEEE;
          background: #F5F6F7;
          text-align: left;
          padding: 0 10px;
          color: #999999;
          font-size: 13px;
        }

        .checkObjectValue {
          height: 40px;
          line-height: 40px;
          width: 100%;
          border: 1px solid #EEEEEE;
          padding-left: 10px;
          color: #333333;
          font-size: 13px;
        }
      }
    }

    .searchBox {
      .label {
        display: flex;
      }
    }

  }

  .contentTable {
    margin: 0;

    .operationBtn {
      //display: flex;
      //justify-content: center;
      //align-items: center;
      padding: 0 5px;
      //color: #035beb;
    }
  }

  .titleItem::before {
    display: none;
    //content: '';
    //position: absolute;
    //width: 3px;
    //height: 20px;
    //top: 12px;
    //left: 0px;
    //background: #187BDB;
  }
}

.over-wrapper {
  width: 200px;
  /*height: 23px;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
